<template>
  <view>
    <view class="progress-card">
      <view class="progress-header">
        <text class="progress-title">目前投票情况</text>
        <view class="progress-tabs">
          <view 
            class="tab-btn" 
            :class="{ active: activeTab === 'people' }"
            @click="switchTab('people')"
          >
            人数
          </view>
          <view 
            class="tab-btn" 
            :class="{ active: activeTab === 'area' }"
            @click="switchTab('area')"
          >
            面积
          </view>
        </view>
      </view>
      
      <view class="chart-container">
        <!-- 左侧已投票统计 -->
        <view class="stat-left">
        
          <view class="stat-content">
            <view class="stat-text">{{ activeTab === 'people' ? '已投票人数' : '已投票面积' }}: {{ activeTab === 'people' ? votedCount : votedCount }}{{ activeTab === 'people' ? '人' : '㎡' }}</view>
            <!-- <view class="stat-line voted-line"></view> -->
            <view class="stat-percentage">占比: {{ activeTab === 'people' ? VotingratioInfo.alreadyproportion : VotingratioInfo.personproportion }}</view>
          </view>
        </view>
        
        <!-- 中间饼状图 -->
        <view class="donut-chart">
          <view class="chart-background"></view>
          <view class="chart-ring" :style="{ '--voted-angle': votedAngle + 'deg' }">
          </view>
          <view class="chart-center">
            <text class="total-text"> {{ activeTab === 'people' ? totalCount : Math.round(totalCount) }} {{ activeTab === 'people' ? '人' : '㎡' }}</text>
          </view>
        </view>
        
        <!-- 右侧未投票统计 -->
        <view class="stat-right">
          <!-- <view class="stat-line not-voted-line"></view> -->
          <view class="stat-content">
            <view class="stat-text">{{ activeTab === 'people' ? '未投票人数' : '未投票面积' }}: {{ activeTab === 'people' ? notVotedCount : Math.round(notVotedCount) }}{{ activeTab === 'people' ? '人' : '㎡' }}</view>
            <view class="stat-percentage">占比: {{ (100 - parseFloat(activeTab === 'people' ? VotingratioInfo.alreadyproportion : VotingratioInfo.personproportion)).toFixed(2) }}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VoteFromCard',
  props:{
    formData:{
      deep:true,
      type:Object,
      default:()=>{}
    },
    voteContent:{
      type:String,
      default:''
    },
    VotingratioInfo:{
      deep:true,
      type:Object,
      default:()=>{}
    },
    isVotingInfo:{
      deep:true,
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return {
      activeTab: 'people', // 'people' 或 'area'
      btns:[
        {
          name:'投票明细',
          isArrow:true
        }
      ]
    }
  },
  computed:{
    isStatusText(){
      let status=this.isVotingInfo.status
      return status==1?'投票进行中':status==2?'投票未开始':'投票已结束'
    },
    
    // 人数相关数据
    totalPeople() {
      const total = this.VotingratioInfo.sumTotalPerson || 0;
      console.log('totalPeople:', total);
      return total;
    },
    votedPeople() {
      const voted = this.VotingratioInfo.already || 0;
      console.log('votedPeople:', voted);
      return voted;
    },
    notVotedPeople() {
      return this.totalPeople - this.votedPeople;
    },
    
    // 面积相关数据
    totalArea() {
      return this.VotingratioInfo.sumTotalSize || 0;
    },
    votedArea() {
      return this.VotingratioInfo.sumVoteTotalSize || 0;
    },
    notVotedArea() {
      return this.totalArea - this.votedArea;
    },
    
    // 当前选中tab的数据
    totalCount() {
      return this.activeTab === 'people' ? this.totalPeople : this.totalArea;
    },
    votedCount() {
      return this.activeTab === 'people' ? (this.votedPeople || 0) : (this.votedArea || 0);
    },
    notVotedCount() {
      return this.activeTab === 'people' ? (this.notVotedPeople || 0) : (this.notVotedArea || 0);
    },
    
    // 百分比计算
    votedPercentage() {
      let percentage = 0;
      if (this.activeTab === 'people') {
        percentage = parseFloat(this.VotingratioInfo.alreadyproportion?.replace('%', '') || '0');
      } else {
        percentage = parseFloat(this.VotingratioInfo.personproportion?.replace('%', '') || '0');
      }
      console.log('votedPercentage:', this.VotingratioInfo.alreadyproportion);
      return percentage;
    },
    notVotedPercentage() {
      return 100 - this.votedPercentage;
    },
    
    // 饼图角度计算
    votedAngle() {
      return (this.votedPercentage / 100) * 360;
    },
    notVotedAngle() {
      return 360 - this.votedAngle;
    }
  },
  methods:{
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    goToVotingResultsList(){
      const {voteId,communityId}=this.formData
      uni.navigateTo({
        url: '/pages/votingresultslist/index?voteId=' + voteId + '&communityId=' + communityId
      })
    }
  }
}
</script>

<style scoped>
.progress-card {
  background: #ffffff;
  border-radius: 18rpx;
  padding:30rpx 20rpx;

  box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.progress-title {
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
}

.progress-tabs {
  display: flex;
  background: #f5f5f5;
  border: 1rpx solid #E1E1E1;
  border-radius: 6rpx;
  overflow: hidden;
}

.tab-btn {
  padding: 6rpx 18rpx;
  font-size: 24rpx;
  color: #666666;
  background: #ffffff ;
  transition: all 0.3s;
  box-shadow: 0rpx 34rpx 144rpx 0rpx rgba(58,76,130,0.08), 0rpx 5rpx 14rpx 0rpx rgba(169,194,209,0.1);

 
}

.tab-btn.active {
  background: #3B75FA;
  color: #ffffff;
 
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* 左侧已投票统计 */
.stat-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 20rpx;
}

.stat-line {
  width: 60rpx;
  height: 2rpx;
  margin-bottom: 16rpx;
}

.voted-line {
  background: #07B74D;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-text {
  font-size: 26rpx;
  color: #333333;
  margin-bottom: 8rpx;
  white-space: nowrap;
}

.stat-percentage {
  font-size: 24rpx;
  color: #07B74D;
}

/* 中间饼状图 */
.donut-chart {
  position: relative;
  width: 175rpx;
  height: 175rpx;
  flex-shrink: 0;
}

.chart-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 196rpx;
  height: 196rpx;
  border-radius: 50%;
  background: #F6FBFE;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,17,65,0.05);
  z-index: -1;
}

.chart-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#4CDEAD 0deg, #4CDEAD var(--voted-angle, 0deg), #e5e5e5 var(--voted-angle, 0deg), #e5e5e5 360deg);
}

.chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: 118rpx;
  height: 118rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.total-text {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

/* 右侧未投票统计 */
.stat-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 20rpx;
}

.not-voted-line {
  background: #e5e5e5;
}

.stat-right .stat-content {
  text-align: left;
}

.stat-right .stat-percentage {
  color: #999999;
}
</style>
